<template>
<h1>库存一览</h1>
  <el-table :data="goodsList" stripe>
    <el-table-column prop="goodsName" label="商品名称"></el-table-column>
    <el-table-column label="商品类别">
      <template #default="scope">
        <span v-if="scope.row.goodsType==1">电脑产品</span>
        <span v-else-if="scope.row.goodsType==2">安防产品</span>
        <span v-else>办公耗材</span>
      </template>
    </el-table-column>
    <el-table-column prop="goodsBrand" label="品牌"></el-table-column>
    <el-table-column prop="inventoryNo" label="库存数量"></el-table-column>
    <el-table-column label="操作">
      <template #default="scope">
        <el-button type="primary" @click="find(scope.row.goodsId)">查看</el-button>
        <el-button type="primary" @click="update(scope.row.goodsId)">修改销售价</el-button>
      </template>
    </el-table-column>
  </el-table>
  <el-pagination v-model:current-page="curPage" v-model:page-size="pageSize" background
                 :total="total" @current-change="reload"></el-pagination>

  <el-dialog v-model="findVisible" title="商品信息详情" width="30%">
    <el-form :model="goodsForm">
      <el-form-item label="商品编号" prop="goodsNo">
        <span>{{goodsForm.goodsNo}}</span>
      </el-form-item>
      <el-form-item label="商品名称" prop="goodsName">
        <span>{{goodsForm.goodsName}}</span>
      </el-form-item>
      <el-form-item label="品牌" prop="goodsBrand">
        <span>{{goodsForm.goodsBrand}}</span>
      </el-form-item>
      <el-form-item prop="goodsImg">
        <el-image :src="'/api/face/'+goodsForm.goodsImg" style="width: 100px;height: 100px"></el-image>
      </el-form-item>
      <el-form-item label="类别">
        <span v-if="goodsForm.goodsType==1">电脑产品</span>
        <span v-else-if="goodsForm.goodsType==2">安防产品</span>
        <span v-else>办公耗材</span>
      </el-form-item>
      <el-form-item label="库存数量" prop="inventoryNo">
        <span>{{goodsForm.inventoryNo}}</span>
      </el-form-item>
      <el-form-item label="最新采购价" prop="buyPrice">
        <span>{{goodsForm.buyPrice}}</span>
      </el-form-item>
      <el-form-item label="建议销售价" prop="salePrice">
        <span>{{goodsForm.salePrice}}</span>
      </el-form-item>
    </el-form>
    <template #footer>
      <span class="dialog-footer">
       <el-button type="primary" @click="findVisible=false">确定</el-button>
      </span>
    </template>
  </el-dialog>

  <el-dialog v-model="updateVisible" title="修改商品销售价" width="30%">
    <el-form :model="goodsForm">
      <el-form-item label="商品编号" prop="goodsNo">
        <span>{{goodsForm.goodsNo}}</span>
      </el-form-item>
      <el-form-item label="商品名称" prop="goodsName">
        <span>{{goodsForm.goodsName}}</span>
      </el-form-item>
      <el-form-item label="品牌" prop="goodsBrand">
        <span>{{goodsForm.goodsBrand}}</span>
      </el-form-item>
      <el-form-item prop="goodsImg">
        <el-image :src="'/api/face/'+goodsForm.goodsImg" style="width: 100px;height: 100px"></el-image>
      </el-form-item>
      <el-form-item label="类别">
        <span v-if="goodsForm.goodsType==1">电脑产品</span>
        <span v-else-if="goodsForm.goodsType==2">安防产品</span>
        <span v-else>办公耗材</span>
      </el-form-item>
      <el-form-item label="库存数量" prop="inventoryNo">
        <span>{{goodsForm.inventoryNo}}</span>
      </el-form-item>
      <el-form-item label="最新采购价" prop="buyPrice">
        <span>{{goodsForm.buyPrice}}</span>
      </el-form-item>
      <el-form-item label="建议销售价" prop="salePrice">
        <el-input-number :min="1" v-model="goodsForm.salePrice"></el-input-number>
      </el-form-item>
    </el-form>
    <el-form-item prop="goodsId"></el-form-item>
    <template #footer>
      <span class="dialog-footer">
       <el-button type="primary" @click="updateSalePrice">修改</el-button>
      </span>
    </template>
  </el-dialog>

  <div>
    <el-row>
      <el-col :span="12">
       <span>商品名称</span> <el-input v-model="findName" style="width: 150px"></el-input>
      </el-col>
      <el-col :span="12">
        <span>起始数量</span> <el-input-number v-model="startNo"></el-input-number>
      </el-col>
    </el-row>
    <el-row>
      <el-col :span="12">
        <span>未定销售价</span>
        <el-select v-model="noSalePrice">
          <el-option label="不限" value="0"></el-option>
          <el-option label="未定销售价" value="1"></el-option>
        </el-select>
      </el-col>
      <el-col :span="12">
        <span>结束数量</span> <el-input-number v-model="endNo"></el-input-number>
      </el-col>
    </el-row>
    <el-select v-model="goodsType">
      <el-option label="电脑产品" value="1"></el-option>
      <el-option label="安防产品" value="2"></el-option>
      <el-option label="办公耗材" value="3"></el-option>
    </el-select>
    <el-button type="primary" @click="reload">查询</el-button>

  </div>
</template>

<script>
import axios from "axios";
import {ElMessage} from "element-plus";

export default {
  created() {
    this.reload();
  },
  name: "Goods",
  data(){
    return{
      goodsList:[],
      curPage:1,
      pageSize:4,
      total:0,
      findVisible:false,
      updateVisible:false,
      goodsForm:{},
      findName:'',
      startNo:0,
      endNo:0,
      noSalePrice:"0",
      goodsType:"1"
    }
  },
  methods:{
    find(goodsId){
      let param= new URLSearchParams();
      param.append("goodsId",goodsId)
      axios.post("/api/goods/findGoodsById",param).then(response=>{
        this.goodsForm = response.data;
        this.findVisible=true;
      })
    },
    update(goodsId){
      let param= new URLSearchParams();
      param.append("goodsId",goodsId)
      axios.post("/api/goods/findGoodsById",param).then(response=>{
        this.goodsForm = response.data;
        this.updateVisible=true;
      })
    },
    updateSalePrice(){
      let param =new URLSearchParams();
      param.append("goodsId",this.goodsForm.goodsId);
      param.append("salePrice",this.goodsForm.salePrice)
      axios.post("/api/goods/modifySalePrice",param).then(response=>{
        if (response.data=='success'){
          ElMessage.success("修改成功");
          this.updateVisible = false;
        }else {
          ElMessage.error("修改失败")
        }
      })
    },
    reload(){
      let param ={
        "pageNo" : this.curPage,
        "pageSize" :this.pageSize,
        "startNo": this.startNo,
        "endNo" : this.endNo,
        "noSalePrice" : this.noSalePrice,
        "t" : {"goodsName":this.findName,
        "goodsType" : this.goodsType}
      }
      axios.post("/api/goods/findGoodsByPage",param).then(response=>{
        let data =response.data;
         this.goodsList = data.records;
         this.total = data.total;
      })
    }
  }
}
</script>

<style scoped>

</style>